<template>
	<div id="search">
		<el-row class="block-col-2">
			<el-col :span="8"></el-col>
			<el-col :span="8" class="elcol-1">
				<el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
				  <el-button slot="append" icon="el-icon-search"></el-button>
				</el-input>
			</el-col>
			<el-col :span="8" class="elcol-1">
				<el-dropdown>
				  <span class="el-dropdown-link" >
					购物车<i class="el-icon-shopping-cart-1"></i>
				  </span>
				  <el-dropdown-menu slot="dropdown">
					<span class="el-dropdown-menu-header">最近添加的商品</span>
					<hr>
					<el-dropdown-item>
						<el-row>
							<el-col :span="8"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602691036596&di=a8b41c30c98757c12e60c98031b758a8&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F36%2F48%2F19300001357258133412489354717.jpg" alt=""></el-col>
							<el-col :span="8"><div class="goods-message">草莓</div></el-col>
							<el-col :span="8"></el-col>
						</el-row>
					</el-dropdown-item>
					<el-dropdown-item>
						<el-row>
							<el-col :span="8"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602691036596&di=a8b41c30c98757c12e60c98031b758a8&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F36%2F48%2F19300001357258133412489354717.jpg" alt=""></el-col>
							<el-col :span="8"><div class="goods-message">草莓</div></el-col>
							<el-col :span="8"></el-col>
						</el-row>
					</el-dropdown-item>
				  </el-dropdown-menu>
				</el-dropdown>
			</el-col>
		</el-row>
	</div>
</template>
	
<script>
	export default {
	  data () {
		  return {
		  }
	  },
	  methods: {
		 
	  }
	}
</script>

<style>
	#search {
		width: 80%;
		height: 80px;
		margin-left: 10%;
	}
	.block-col-2 {
		position: relative;
		top: 50%;
		transform: translateY(-50%)
	}
	.elcol-1 {
		padding-right: 100px;
		line-height: 40px;
	}
	.el-dropdown {
		height: 100%;
		width: 200px;
		border: solid 1px #CCCCCC;
		opacity: 0.5;
		box-shadow:1px 2px rgba(0, 0, 0, .5);
		border-radius: 10px;
		background-color: #ECF5FF;
		color: #303133;
	}
	.el-dropdown:hover {
		border: solid 1px #99CCFF;
		box-shadow:1px 2px ##6699CC;
		color: #99CCFF;
		opacity: 1;
	}
	.el-dropdown-link {
		display:block;
		width: 100%;
		text-align: center;
		font-size: 15px;

	}
	.el-icon-shopping-cart-1 {
		font-size: 20px;
		margin-left: 8px;
	}
	.el-dropdown-menu {
		width: 400px;
	}
	.el-dropdown-menu-header {
		font-size: 15px;
		color: #C0C4CC;
		text-align: center;
		display: block;
	}
	.el-dropdown-menu img {
		width: 80px;
		height: 80px;
	}
	.el-dropdown-menu hr {
		width: 80%;
		margin-left: 10%;
		margin-top: 10px;
	}
	.goods-message {
		margin-top: 20px;
	}
</style>
